<template>
    <div ref="ehcartsContainer" :style="{ width, height }">

    </div>
    <!-- <button @click="downLoad">DownLoad</button> -->


</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
let ehcartsContainer = ref(null)
let chartsInstance: any = null;

const downLoad = () => {
    const img = chartsInstance.getDataURL({
        type: "png",
        pixelRatio: 2,
        backgroundColor: '#fff'
    })

    const link = document.createElement('a')
    link.href = img
    link.download = '股票K线图.png'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

}



const props = defineProps({
    option: Object,
    width: {
        type: String,
        // default: '100%'
        default: '100%'
    },
    height: {
        type: String,
        // default: '200px'
        default: "500px"
    }
})
const __resize = () => {
    chartsInstance && chartsInstance.resize();
}

onMounted(() => {
    // console.log('AppChart onMounted');


    // 基于准备好的dom，初始化echarts实例
    chartsInstance = echarts.init(ehcartsContainer.value);
    // 绘制图表
    // console.log(props.option,"AppChart");
    chartsInstance.setOption(props?.option)
    //当浏览器发生改变时
    window.addEventListener('resize', __resize);
})

// 
watch(props, ((newVal) => {
    console.log('watch', newVal);
    if (chartsInstance) {
        chartsInstance.setOption(newVal.option)
    }
}), { deep: true })


</script>
<style lang='scss' scoped></style>